liankao/src/pages/process/jyysz/[ykj_id].vue

<script setup>
import { useRouter } from 'vue-router'
import request from '~/utils/request'

const router = useRouter()
const route = useRoute()
function linkTo(obj) {
  router.push(obj)
}
let ykj_id = $ref('')
const keyword = $ref('')
const limit = $ref(10)
let total = $ref(0)
let cur_page = $ref(1)
let listData = $ref([])
let dialogVisible = $ref(false)
let title = $ref('')
let is_edit = $ref(false)
let project = $ref({})
let subject = $ref([])
let subject_list = $ref([])
let teacher = $ref({
  value: '',
  label: '',
  user_realname: '',
})
let yj_id = $ref('')
let teacher_list = $ref([])

function getListData() {
  request({
    url: '/yzy/jyy/index',
    data: {
      ykj_id,
      keyword,
      page: cur_page,
      limit,
    },
  }).then((res) => {
    if (res.code === '1') {
      listData = res.data.page_data
      total = Number(res.data.total_rows)
      cur_page = Number(res.data.page_now)
    }
  })
}

function getProjectInfo() {
  const data = {
    ykj_id,
  }
  request({
    url: '/yzy/ksjh/detail',
    data,
  }).then((res) => {
    if (res.code === '1') {
      project = res.data.one_info
      subject_list = project.lc
      gerUsers()
    }
  })
}

function filterData() {
  cur_page = 1
  getListData()
}

function handleSelectionChange(val) {
  cur_page = val
  getListData()
}

function addTeacher() {
  is_edit = false
  subject = []
  title = '增加教研员'
  dialogVisible = true
  teacher = {
    value: '',
    label: '',
    user_realname: '',
  }
}

function gerUsers() {
  request({
    url: `${window.GLOBAL_CONFIG.uc}/user/main/teachers`,
    data: {
      // sm_id: project.ykj_lkxx,
      // user_role_id: user.user_role_id,
      page: '1',
      limit: '9999',
    },
  }).then((res) => {
    if (res.code === '1')
      teacher_list = res.data.page_data
  })
}

function editTeacher(item) {
  is_edit = true
  title = '编辑教研员'
  teacher = {
    value: item.yj_user_id,
    label: item.yj_username,
    user_realname: item.yj_realname,
  }
  yj_id = item.yj_id
  subject = []
  for (const i in item.yj_subject_id.split(',')) {
    const obj = {
      value: item.yj_subject_id.split(',')[i],
      label: item.yj_subject_name.split(',')[i],
    }
    subject.push(obj)
  }
  dialogVisible = true
}
function del_teacher(item) {
  ElMessageBox.confirm('确认删除该教研员?', '', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    request({
      url: '/yzy/jyy/delete',
      data: {
        yj_id: item.yj_id,
      },
    }).then((res) => {
      if (res.code === '1') {
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        getListData()
      }
    })
  })
}
function handleSubmit() {
  const subject_ids = []
  const subject_names = []
  for (const i in subject) {
    subject_ids.push(subject[i].value)
    subject_names.push(subject[i].label)
  }
  if (!is_edit) {
    request({

      url: '/yzy/jyy/add',
      data: {
        issubmit: '1',
        yzy_jyy: {
          ykj_id,
          yj_user_id: teacher.value,
          yj_realname: teacher.user_realname,
          yj_username: teacher.label,
          yj_subject_id: subject_ids.join(','),
          yj_subject_name: subject_names.join(','),
        },
      },
    }).then((res) => {
      if (res.code === '1') {
        ElMessage.success('教研员添加成功！')
        dialogVisible = false
        getListData()
      }
    })
  }
  else {
    request({

      url: '/yzy/jyy/edit',
      data: {
        issubmit: '1',
        yj_id,
        yzy_jyy: {
          ykj_id,
          yj_user_id: teacher.value,
          yj_realname: teacher.user_realname,
          yj_username: teacher.label,
          yj_subject_id: subject_ids.join(','),
          yj_subject_name: subject_names.join(','),
        },
      },
    }).then((res) => {
      if (res.code === '1') {
        ElMessage.success('教研员编辑成功！')
        dialogVisible = false
        getListData()
      }
    })
  }
}

if (route.params.ykj_id) {
  ykj_id = route.params.ykj_id
  getListData()
  getProjectInfo()
}
</script>

<route lang="json">
{
"meta":{
"title":"教研员设置",
"breadcrumb":true
}
}
</route>

<template>
  <NavHeader />
  <bread-crumb />
  <div class="w-1200px m-auto">
    <div class="relative -mt-40px flex justify-end">
      <button type="button" class="back-btn" @click="linkTo({ name: 'process' })">
        返回
      </button>
    </div>
    <div class="mt-10px w-full bg-hex-fff min-h-700px py-20px px-15px">
      <div class="flex align-center">
        <el-input
          v-model="keyword"
          class="ml-20px"
          style="width: 225px;"
          size="large"
          clearable
          placeholder="请输入关键字"
          @keyup.enter="filterData"
          @clear="filterData"
        />
        <el-button color="#003eee" class="ml-10px" type="primary" size="large" @click="filterData">
          搜索
        </el-button>
        <button type="button" class="ml-10px add-btn" @click="addTeacher">
          <el-icon class="inline-block align-middle">
            <Plus />
          </el-icon>
          <span class="ml-5px inline-block align-middle">新增教研员</span>
        </button>
      </div>
      <h3 class="mt-20px mb-10px text-13px text-hex-6F6F6F">
        （此处为查看扫描批阅进度的权限赋予设置）
      </h3>
      <div v-if="listData.length > 0">
        <table class="data-table" cellpadding="0" cellspacing="0">
          <tr>
            <th>教研员名称</th>
            <th>教研员账号</th>
            <th>权限科目</th>
            <th>操作</th>
          </tr>
          <tr v-for="item in listData">
            <td>{{ item.yj_realname }}</td>
            <td>{{ item.yj_username }}</td>
            <td>{{ item.yj_subject_name }}</td>
            <td>
              <button type="button" class="op-btn edit" @click="editTeacher(item)">
                编辑
              </button>
              <button type="button" class="ml-15px op-btn del" @click="del_teacher(item)">
                删除
              </button>
            </td>
          </tr>
        </table>
        <div class="mt-20px page-new flex justify-end">
          <el-pagination
            v-model:current-page="cur_page" v-model:page-size="limit" layout="total,prev, pager, next"
            :total="total" :background="true" @current-change="handleSelectionChange"
          />
        </div>
      </div>
      <div v-else class="no-data">
        <div>
          <h3 class="no-data-img" />
          <h4 class="mt-25px text-18px text-hex-0048e5 text-center">
            暂无数据
          </h4>
        </div>
      </div>
    </div>
  </div>
  <commonFooter />
  <el-dialog
    v-model="dialogVisible"
    :title="title"
    width="500px"
    append-to-body
  >
    <div>
      <el-form label-width="120px" size="large">
        <el-form-item label="教研员">
          <el-select v-model="teacher" placeholder="请选择教研员" filterable style="width: 100%">
            <el-option
              v-for="item in teacher_list" :label="`${item.user_realname} - ${item.user_name}`"
              :value="{ value: item.user_id, label: item.user_name, user_realname: item.user_realname }"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="可查看学科">
          <el-select v-model="subject" placeholder="请选择学科" multiple filterable style="width: 100%">
            <el-option
              v-for="item in subject_list" :value-key="item.ze_xueke" :label="item.ze_xueke_name"
              :value="{ value: item.ze_xueke, label: item.ze_xueke_name }"
            />
          </el-select>
        </el-form-item>
        <div class="mt-40px text-center">
          <el-button class="mr-30px" @click="dialogVisible = false">
            取消
          </el-button>
          <el-button
            type="primary" color="#003eee" :disabled="teacher.value === '' || subject.length === 0"
            @click="handleSubmit"
          >
            确定
          </el-button>
        </div>
      </el-form>
    </div>
  </el-dialog>
</template>

<style scoped lang="scss">
$color: #0048e5;
::v-deep .el-pagination.is-background .btn-next.is-active,
::v-deep .el-pagination.is-background .btn-prev.is-active,
::v-deep .el-pagination.is-background .el-pager li.is-active {
  background-color: $color;
}

.add-btn {
  width: 129px;
  height: 40px;
  background: #ffffff;
  border: 1px solid $color;
  border-radius: 4px;
  font-size: 14px;
  color: $color;
  text-align: center;

  .el-icon {
    font-size: 16px;
  }
}

.data-table {
  width: 100%;
  table-layout: fixed;

  tr:nth-child(even) {
    background: #F1F7FF;
  }

  th {
    height: 50px;
    background: $color;
    font-weight: normal;
    text-align: center;
    font-size: 16px;
    color: #fff;

    &:first-child {
      border-radius: 6px 0 0 0;
    }

    &:last-child {
      border-radius: 0 6px 0 0;
    }
  }

  td {
    padding: 15px 0;
    font-size: 16px;
    color: #474747;
    text-align: center;
  }
}

.op-btn {
  width: 56px;
  height: 30px;
  background: #ffffff;
  font-size: 14px;
  border-radius: 2px;

  &.edit {
    border: 1px solid $color;
    color: $color;
  }

  &.del {
    border: 1px solid #E50101;
    color: #E50101;
  }
}

.no-data {
  width: 100%;
  height: 450px;
  display: flex;
  justify-content: center;
  align-items: center;

  .no-data-img {
    width: 233px;
    height: 199px;
    background: url("/images/no-data.png") center no-repeat;
  }
}
</style>